<template>
  <div class="contentShadow">
    <el-container>
      <el-header>
        <h1>学生名单</h1>
      </el-header>
      <el-main>
        <el-radio-group v-model="size">
          <el-radio label="">默认</el-radio>
          <el-radio label="medium">中等</el-radio>
          <el-radio label="small">小型</el-radio>
          <el-radio label="mini">超小</el-radio>
        </el-radio-group>
        <!-- 表格 -->
        <el-table :data="tableData" :size="size">
          <el-table-column prop="number" label="序号" type="index" :index="indexMethod" align="center">
          </el-table-column>
          <el-table-column prop="studentId" label="学号" align="center">
          </el-table-column>
          <el-table-column prop="name" label="姓名" align="center">
          </el-table-column>
          <el-table-column prop="gender" label="性别" align="center" :formatter="genderFormatter">
          </el-table-column>
          <el-table-column prop="grade" label="级别" align="center">
          </el-table-column>
          <el-table-column prop="majorName" label="专业" align="center">
          </el-table-column>
          <el-table-column prop="className" label="学苑" align="center">
          </el-table-column>
          <el-table-column prop="mentorName" label="导师" align="center">
          </el-table-column>
          <el-table-column prop="id" label="操作" align="center">
            <template v-slot="scope">
              <el-button type="warning" @click="modify(scope.$index)" :size="size">修改</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <div class="block" style="margin-top:15px;display: flex; justify-content: center;">
          <el-pagination @size-change="handleSizeChange"
                         @current-change="handleCurrentChange"
                         :current-page="conditions.currentPage"
                         :page-sizes="[1, 5, 10, 20, 50]"
                         :page-size="conditions.pageSize"
                         background
                         layout="total, sizes, prev, pager, next, jumper"
                         :total="conditions.total">
          </el-pagination>
        </div>
        <!-- 检索 -->
        <div>
          <div style="margin-top: 15px">
            <el-button type="primary" @click="dialogVisible = true">检索</el-button>
          </div>
          <el-dialog
              title="检索"
              :visible.sync="dialogVisible"
              width="30%"
              :close-on-click-modal="false"
          >
            <div>
              <el-form ref="form" :model="conditions" size="small">
                <el-form-item label="学号" prop="studentId">
                  <el-input v-model="conditions.studentId"></el-input>
                </el-form-item>
                <el-form-item label="级别" prop="grade">
                  <el-input v-model="conditions.grade"></el-input>
                </el-form-item>
                <el-form-item label="专业" prop="majorId">
                  <el-select v-model="conditions.majorId" placeholder="学苑">
                    <el-option v-for="item in majorList"
                               :key="item.majorId"
                               :label="`${item.majorName} (${item.majorCode})`"
                               :value="item.majorId">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="学苑" prop="classId">
                  <el-select v-model="conditions.classId" placeholder="学苑">
                    <el-option v-for="item in classList"
                               :key="item.classId"
                               :label="item.className"
                               :value="item.classId">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="导师" prop="mentorId">
                  <el-select v-model="conditions.mentorId" placeholder="导师">
                    <el-option v-for="item in mentorList"
                               :key="item.jobId"
                               :label="`${item.mentorName} (${item.jobId})`"
                               :value="item.mentorId">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
             <el-button @click="resetForm('form')">重置</el-button>
             <el-button type="primary" @click="searchFor">查找</el-button>
            </span>
          </el-dialog>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import {countStudent, acquireStudentInformation} from "@/api/admin";
import {acquireClassInformation, acquireMajorInformation, acquireMentorInformation} from "@/api/basic";

export default {
  data() {
    return {
      tableData: [],
      size: '',
      dialogVisible: false,
      conditions: {
        currentPage: 1, // 当前页码
        total: 0, // 总条数
        pageSize: 5, // 每页的数据条数
        studentId: '',
        jobId: '',
        grade: '',
        majorId: '',
        classId: '',
        fileName: ''
      },
      majorList: [
        {majorId: 0, majorCode: '000000', majorName: '未指定'},
        {majorId: 1, majorCode: '080902', majorName: '软件工程'}
      ],
      classList: [
        {classId: 0, className: '未指定'},
        {classId: 1, className: '求知一苑'},
        {classId: 2, className: '求知二苑'}
      ],
      mentorList: [{mentorId: '', jobId: '', mentorName: ''}],
    };
  },
  mounted() {
    countStudent(this.conditions).then(res1 => {
      this.conditions.total = res1.data
      acquireStudentInformation(this.conditions).then(res2 => {
        this.tableData = res2.data
      })
    })
    acquireMajorInformation().then(res => {
      this.majorList = res.data
    })
    acquireClassInformation().then(res => {
      this.classList = res.data
      this.classList.sort((a, b) => a.classOrder - b.classOrder);
    })
    acquireMentorInformation().then(res => {
      this.mentorList = res.data
    })
  },
  methods: {
    // 格式化性别
    genderFormatter(row) {
      if (row.gender === 0) {
        return '女';
      } else if (row.gender === 1) {
        return '男';
      }
    },
    // 每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.conditions.currentPage = 1;
      this.conditions.pageSize = val;
      countStudent(this.conditions).then(res1 => {
        this.conditions.total = res1.data
        acquireStudentInformation(this.conditions).then(res2 => {
          this.tableData = res2.data
        })
      })

    },
    // 当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.conditions.currentPage = val;
      countStudent(this.conditions).then(res1 => {
        this.conditions.total = res1.data
        acquireStudentInformation(this.conditions).then(res2 => {
          this.tableData = res2.data
        })
      })
    },
    // 生成自增的序号
    indexMethod(index) {
      return index + 1 + (this.conditions.currentPage - 1) * this.conditions.pageSize;
    },
    // 检索
    searchFor() {
      this.conditions.currentPage = 1;
      countStudent(this.conditions).then(res1 => {
        this.conditions.total = res1.data
        acquireStudentInformation(this.conditions).then(res2 => {
          this.tableData = res2.data
          this.dialogVisible = false
        })
      })
    },
    // 重置
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    // 点击详情跳转
    modify(index) {
      this.$router.push("/admin/submit-student-information?id=" + this.tableData[index].userId);
    },
  }
};
</script>

<style>
@import '../../style/contentShadow.css';
</style>
